<script setup lang="ts">

import useCountStore from '@/store/count';
import { ref } from 'vue';
let countStore = useCountStore()




// 专门处理小数点问题
function dot(value: any) {

  let str = ref(countStore.input.substring(countStore.input.lastIndexOf(' ')))

  // 防止小数点出现多次
  if (str.value.indexOf('.') != -1) {
    return  // 直接return这个方法，意味着不执行这个方法
  } else {
    countStore.input += '.'
  }
}

function clear() {
  countStore.input = '0'
}

// 对 + - * / % 的操作
function symbol(value: string) {
  // countStore.input += ' ' + value + ' '
  console.log(countStore.input);
  
  if (countStore.input.charAt(countStore.input.length-1) === ' ') {
    console.log('ada');

    let end  = countStore.input.lastIndexOf(' ') -2
    
    countStore.input = countStore.input.slice( 0 , end ) + ' ' + value + ' '
  }else{
    countStore.input = countStore.input + ' ' + value + ' '
  }
  

}

function sign() {

  let lastNumber = countStore.input.substring(countStore.input.lastIndexOf(' '))

  //得到之前的数值+符号
  let prevNumber = countStore.input.substring(0, countStore.input.lastIndexOf(' '))

  //判断当前是否有正负号
  if (lastNumber.indexOf('-') === -1) {
    lastNumber = ' -' + lastNumber.trim()
  } else {
    lastNumber = ' ' + lastNumber.trim().substr(1)
  }

  //合并
  countStore.input = prevNumber + lastNumber
}

function num(value: string) {

  // 当输入的字符为0时，不希望会重复出现0 ，以及让0.5 这样能成立
  if (parseInt(countStore.input) === 0 && !/0[\.|\s]/.test(countStore.input)) {
    countStore.input = value
  } else {
    countStore.input += value
  }
}


//  拿到输入框中的内容进行运算
function count() {
  countStore.input = eval(countStore.input);
}

</script>

<template>
  <div id="calc-box">
    <button class="btn" @click="clear()">C</button>

    <button class="btn" @click="sign()">+/-</button>

    <button class="btn" @click="symbol('x')">x</button>
    <button class="btn" @click="symbol('/')">÷</button>

    <button class="btn" @click="num('1')">1</button>
    <button class="btn" @click="num('2')">2</button>
    <button class="btn" @click="num('3')">3</button>

    <button class="btn" @click="symbol('-')">-</button>

    <button class="btn" @click="num('4')">4</button>
    <button class="btn" @click="num('5')">5</button>
    <button class="btn" @click="num('6')">6</button>

    <button class="btn" @click="symbol('+')">+</button>

    <button class="btn" @click="num('7')">7</button>
    <button class="btn" @click="num('8')">8</button>
    <button class="btn" @click="num('9')">9</button>

    <button class="btn" @click="symbol('%')">%</button>

    <button class="btn" @click="num('0')">0</button>

    <button class="btn" @click="dot('.')">.</button>

    <button class="btn btn-double" @click="count">=</button>
  </div>
</template>

<style scoped>
.btn {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  background-color: white;
  font-weight: bold;
  color: #666;
  margin-bottom: 10px;
}

.btn:hover {
  background-color: #333;
  color: white;
}

.btn-double {
  width: 84px;
}
</style>
